<template>
    <div id="leftbar" class="">
        <div id="userIconLayer" class="ui one column grid">
            <div class="column">
                <img id="userIcon" class="ui mini circular image" src="../assets/img/logo.png">
            </div>
        </div>
        <div id="menu" class="ui vertical icon menu">
            <a class="purple item active"><i class="gamepad icon"></i> </a>
            <a class="green item "><i class="video camera icon"></i> </a>
            <a class="brown item"><i class="video play icon"></i> </a>
            <div id="bottomMenu" class="ui vertical icon menu">
                <a class="green item active"><i class="desktop icon"></i> </a>
                <a class="blue item "><i class="mail icon"></i> </a>
                <a class="orange item "><i class="setting icon"></i> </a>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: ''
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #leftbar {
        width: auto;
        height: 100%;
        background-color: #E4EAF4;
        padding: 0;
    }

    #menu, #bottomMenu {
        background-color: transparent;
        width: 60px;
        border-color: transparent;
    }

    #bottomMenu {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
    }

    #userIconLayer {
        margin: 0 auto;
        width: 60px;
        height: auto;
    }

</style>
